import Menu from 'ant-design-vue/es/menu'

const { Item, SubMenu } = Menu
import { mapGetters } from 'vuex'

export default {
  name: 'SMenu',
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      topHeaderKey: ''
    }
  },
  computed: {
    ...mapGetters(['openKeys', 'selectedKeys', 'listOutline', 'treeOutline', 'direction', 'activeOpenKeysType'])
  },
  mounted() {

  },
  destroyed() {
    this.$store.dispatch('destroyOutline', {})
  },
  methods: {
    /**
     * 目录叶子节点点击
     * @param item 当前对象
     * @param key key值
     * @param keyPath 路径
     */
    itemClick({ item, key, keyPath }) {
      this.$store.dispatch('setSelectKeys', [key])
      this.scrollAction(key)
    },
    /**
     * SubMenu控件点击
     * @param key 点击对象
     * @param domEvent 事件对象
     */
    titleClick({ key, domEvent }) {
      if (this.openKeys.length > 0 && this.openKeys[this.openKeys.length - 1] === key) {
        this.openKeys.pop()
        return
      }
      //递归获取当前节点的所有父路径
      let clickItem
      this.listOutline.forEach(function(item, index) {
        if (item.id === key) {
          clickItem = item
          return false
        }
      })
      let keys = []
      if (clickItem) {
        while (clickItem.id != 'root') {
          keys.push(clickItem.id)
          clickItem = clickItem.parent
        }
      }
      this.$store.dispatch('setOpenKeys', keys)
      // this.scrollAction(key)
      this.$store.dispatch('setActiveOpenKeysType', 'outline-click')
    },
    /**
     * 滚动行为
     * @param key 滚动到达的目标对象
     */
    scrollAction(key) {
      let element = document.getElementById(key)
      if (element) {
        this.fixTopHeader(key, this.topHeaderKey)
        this.topHeaderKey = key
        element.scrollIntoView(true, { behavior: 'smooth', block: 'start', inline: 'nearest' })
      }
    },
    /**
     * 修复顶部标题内容样式
     * @param newSelectKey 新点击的key
     * @param oldSelecKey 旧的选中的key
     */
    fixTopHeader(newSelectKey, oldSelecKey) {
      let newSelectElement = document.getElementById(newSelectKey)
      if (newSelectElement) {
        newSelectElement.style['padding-top'] = '4.6rem'
        newSelectElement.style['margin-top'] = '-3rem'
        //给新的移动添加新的样式并记录
      }
      let oldSelectElement = document.getElementById(oldSelecKey)
      if (oldSelectElement) {
        oldSelectElement.style['padding-top'] = '15px'
        oldSelectElement.style['margin-top'] = '15px'
      }
    },
    /**
     * 激活指定的目录
     * @param menuItem 目录对象
     */
    activeOutline(menuItem) {
      //通过parent属性去查找父节点的路径信息
      let selectPath = []
      while (menuItem.id != 'root') {
        selectPath.push(menuItem.id)
        menuItem = menuItem.parent
      }
      const len = selectPath.length
      //打开的父路径
      this.openKeys = selectPath.slice(1, len)
      //选中的菜单项
      this.selectedKeys = selectPath.slice(0, 1)
    },
    /**
     * 递归渲染博客大纲
     * @param menu 目录根节点
     * @returns {Array} 返回目录菜单
     */
    renderSubMenu(menu) {
      let resultMenu = []
      for (let i = 0; i < menu.children.length; i++) {
        let menuItem = menu.children[i]
        if (menuItem.children.length === 0) {
          resultMenu.push(<Item {...{ key: menuItem.id }}>
            <span>{menuItem.text}</span>
          </Item>)
        } else {
          const subMenu = this.renderSubMenu(menuItem)
          const on = {
            titleClick: this.titleClick
          }
          resultMenu.push(
            <SubMenu {...{ key: menuItem.id }} {...{ on: on }}>
          <span slot="title">
            <span>{menuItem.text}</span>
          </span>
              {subMenu}
            </SubMenu>
          )
        }
      }
      return resultMenu
    }
  },

  render() {
    const { openKeys, selectedKeys } = this
    const props = {
      mode: 'inline',
      openKeys,
      selectedKeys
    }
    // const props = {}
    const on = {
      click: this.itemClick
    }
    let menuTree = this.renderSubMenu(this.menu)
    return (
      <div class="outline-container">
        <Menu {...{ props }} {...{ props, on: on }}>
          {menuTree}
        </Menu>
      </div>
    )
  }
}


